<script type="text/javascript">


    function drawBarChart(placeholder, data, ticks, colors, labels) {

        $.jqplot(placeholder, data, {
            // Tell the plot to stack the bars
            fontSize: '50',
            stackSeries: true,
            captureRightClick: true,
            seriesColors: colors,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    // Put a 30 pixel margin between bars.
                    barMargin: 10,
                    // Highlight bars when mouse button pressed.
                    // Disables default highlighting on mouse over.
                    highlightMouseDown: true,
                    barPadding: 10,      // number of pixels between adjacent bars in the same
                    // group (same category or bin).

                    barDirection: 'vertical', // vertical or horizontal.
                    barWidth: 30,     // width of the bars.  null to calculate automatically.
                    shadowOffset: 2,    // offset from the bar edge to stroke the shadow.
                    shadowDepth: 5,     // number of strokes to make for the shadow.
                    shadowAlpha: 0.1   // transparency of the shadow.
                },
                pointLabels: {show: true}

            },
            series: labels,
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,

                    ticks: ticks,
                    tickOptions: {
                        mark: 'outside',    // Where to put the tick mark on the axis
                        // 'outside', 'inside' or 'cross'
                        showMark: true,     // whether or not to show the mark on the axis
                        showGridline: false, // whether to draw a gridline (across the whole grid) at this tick
                        isMinorTick: true, // whether this is a minor tick
                        markSize: 4,        // length the tick will extend beyond the grid in pixels.  For
                        // 'cross', length will be added above and below the grid boundary
                        show: true,         // whether to show the tick (mark and label)
                        showLabel: true,    // whether to show the text label at the tick
                        prefix: '',         // String to prepend to the tick label.
                        // Prefix is prepended to the formatted tick label
                        suffix: '',         // String to append to the tick label.
                        // Suffix is appended to the formatted tick label
                        formatString: '',   // format string to use with the axis tick formatter
                        fontFamily: 'Open Sans',     // css spec for the font-size css attribute
                        fontSize: '',       // css spec for the font-size css attribute
                        textColor: '#478fca',      // css spec for the color attribute
                        escapeHTML: false   // true to escape HTML entities in the label
                    },
                    showTicks: true,        // whether or not to show the tick labels,
                    showTickMarks: true    // whether or not to show the tick marks

                },
                yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    max: 15,
                    min: 0,
                    pad: 0,
                    tickOptions: {
                        formatString: '%d h',   // format string to use with the axis tick formatter

                    },
                    showTickMarks: true
                }
            },
            legend: {
                show: true,
                location: 'ne',
                placement: 'inside',
                xoffset: 0,
                yoffset: 0
            }

        });

    }

    $(function () {
        var bar_chart = $('#bar_chart');

        {#        $.getJSON(bar_chart.attr('address')).then(function (data) {#}
        {##}
        {#            alert('loaded')#}
        {#            var series_data = [];#}
        {##}
        {#            var colors = [];#}
        {##}
        {#            var labels = [];#}
        {##}
        {#            var ticks = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];#}
        {##}
        {#            for (var i = 0; i < data.length; i++) {#}
        {##}
        {#                series_data.push(data[i].data);#}
        {#                colors.push(data[i].color);#}
        {#                labels.push({label:data[i].label});#}
        {##}
        {#                ticks = data[i].ticks;#}
        {##}
        {#            }#}
        {##}
        {#            drawBarChart('bar_chart', series_data, ticks, colors, labels);#}
        {##}
        {#        });#}


    });
</script>

<!-- Additional plugins go here -->

<script class="include" language="javascript" type="text/javascript"
        src='{{ request.static_url("stalker_pyramid:static/jqPlot/plugins/jqplot.barRenderer.min.js") }}'></script>
<script class="include" language="javascript" type="text/javascript"
        src='{{ request.static_url("stalker_pyramid:static/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js") }}'></script>
<script class="include" language="javascript" type="text/javascript"
        src='{{ request.static_url("stalker_pyramid:static/jqPlot/plugins/jqplot.pointLabels.min.js") }}'></script>
